<template>
  <div class="app-container sjqkView">
    <el-form ref="form" :model="form" :rules="rules">
      <BorderView title="社区戒毒情况" />
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item
          label="人员类型*"
          :span="3"
          label-class-name="labelBg"
        >
          <el-form-item prop="termType">
            <el-radio-group v-model="form.termType">
              <el-radio
                v-for="dict in dict.type.sjsk_term_type"
                :key="dict.value"
                :label="dict.value"
              >
                {{ dict.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="执行地区*" label-class-name="labelBg">
          <el-form-item prop="zxdq">
            <template>
              <area-cascader v-model="form.zxdq" />
            </template>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="执行单位详称*" label-class-name="labelBg">
          <el-form-item prop="zxdwxc">
            <el-input v-model="form.zxdwxc" placeholder="请输入执行单位详称" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="责令单位详称*" label-class-name="labelBg">
          <el-form-item prop="zldwxc">
            <el-input v-model="form.zldwxc" placeholder="请输入责令单位详称" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="感染传染疾病*" label-class-name="labelBg">
          <el-form-item prop="grcrjb">
            <el-select
              v-model="form.grcrjb"
              placeholder="请选择感染传染疾病"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="强戒出所日期*" label-class-name="labelBg">
          <el-form-item prop="qjcsrq">
            <el-date-picker
              v-model="form.qjcsrq"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择强戒出所日期"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="接受社区康复前所在的强制隔离场所*"
          label-class-name="labelBg"
        >
          <el-form-item prop="jssqkfqszdqzglcs">
            <el-input
              v-model="form.jssqkfqszdqzglcs"
              placeholder="请输入接受社区康复前所在的强制隔离场所"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="参加药物维持治疗门诊*"
          label-class-name="labelBg"
        >
          <el-form-item prop="cjywwczlmz">
            <el-input
              v-model="form.cjywwczlmz"
              placeholder="请输入参加药物维持治疗门诊"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="是否进入康复场所*"
          label-class-name="labelBg"
          :span="2"
        >
          <el-form-item prop="sfjrkfcs">
            <el-select
              v-model="form.sfjrkfcs"
              placeholder="请输入是否进入康复场所"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.sys_yes_no"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
      <BorderView title="社区戒毒康复协议书*" />
      <el-form-item prop="sqjdkfxys" style="margin-top: 20px">
        <fileUpload v-model="form.sqjdkfxys" />
      </el-form-item>
      <BorderView title="社区戒毒康复责任书" />
      <el-form-item prop="sqjdkfzrs" style="margin-top: 20px">
        <fileUpload v-model="form.sqjdkfzrs" />
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      style="text-align: right; margin-top: 20px"
    >
      <el-button @click="cancel">重置</el-button>
      <el-button
        :loading="buttonLoading"
        type="primary"
        @click="submitForm"
      >下一步</el-button>
    </div>
  </div>
</template>
<script>
import {
  addUser,
  getUser,
  updateUser
} from '@/api/user/userInfo'
import BorderView from '@/views/components/BorderTitleView/index.vue'
export default {
  components: {
    BorderView
  },
  dicts: ['sjsk_term_type', 'sys_yes_no'],
  props: {
    sjskId: {
      type: String
    }
  },
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 表单参数
      form: {},
      // 表单校验

      rules: {
        termType: [
          {
            required: true,
            message: '人员期数类型不能为空',
            trigger: 'change'
          }
        ],
        zxdq: [
          { required: true, message: '执行地区不能为空', trigger: 'blur' }
        ],
        zxdwxc: [
          { required: true, message: '执行单位详称不能为空', trigger: 'blur' }
        ],
        zldwxc: [
          { required: true, message: '责令单位详称不能为空', trigger: 'blur' }
        ],
        grcrjb: [
          { required: true, message: '感染传染疾病不能为空', trigger: 'blur' }
        ],
        qjcsrq: [
          { required: true, message: '强戒出所日期不能为空', trigger: 'blur' }
        ],
        jssqkfqszdqzglcs: [
          {
            required: true,
            message: '接受社区康复前所在的强制隔离场所不能为空',
            trigger: 'blur'
          }
        ],
        cjywwczlmz: [
          {
            required: true,
            message: '参加药物维持治疗门诊不能为空',
            trigger: 'blur'
          }
        ],
        sfjrkfcs: [
          {
            required: true,
            message: '是否进入康复场所不能为空',
            trigger: 'blur'
          }
        ],
        sqjdkfxys: [
          {
            required: true,
            message: '社区戒毒康复协议书不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    sjskId: {
      immediate: true,
      handler(newV) {
        if (newV) {
          getUser(newV).then((res) => {
            if (res.data) {
              this.form = res.data
            } else {
              this.reset()
            }
          })
        }
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          updateUser(this.form)
            .then((response) => {
              this.$modal.msgSuccess('修改成功')
              this.$emit('goto-next', 3)
            })
            .finally(() => {
              this.buttonLoading = false
            })
        }
      })
    },
    // 取消按钮
    cancel() {
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        termType: undefined,
        zxdq: undefined,
        zxdwxc: undefined,
        zldwxc: undefined,
        grcrjb: undefined,
        qjcsrq: undefined,
        jssqkfqszdqzglcs: undefined,
        cjywwczlmz: undefined,
        sfjrkfcs: undefined,
        sqjdkfxys: undefined,
        sqjdkfzrs: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined
      }
      this.resetForm('form')
    }
  }
}
</script>
<style>
.labelBg {
  background: rgb(241, 243, 244) !important;
}
</style>
<style scoped>
.sjqkView /deep/.el-descriptions--small.is-bordered .contentBg {
  padding: 0 !important;
}
.sjqkView .el-input__wrapper {
  border: none !important;
  box-shadow: none !important;
  padding: 0px;
}
.sjqkView /deep/ .el-input__inner {
  border: none !important;
}
.sjqkView /deep/ .el-textarea__inner {
  border: none !important;
}
.sjqkView /deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
